<template>
  <div class="app-container">
    <!-- 查询条件 -->
    <el-form
      :model="queryParams"
      ref="queryRef"      
      :inline="true"      
      label-width="80px"    
    >
      <el-form-item label="编号" prop="id">        
        <el-input          
          v-model="queryParams.id"          
          placeholder="请输入编号"          
          clearable          
          style="width: 180px"          
          @keyup.enter.native="handleQuery"        
        />      
      </el-form-item>
      
      <el-form-item label="枪弹名称" prop="categoryId">        
        <el-select          
          v-model="queryParams.categoryId"          
          placeholder="请选择枪弹名称"          
          clearable          
          style="width: 220px"        
        >          
          <el-option            
            v-for="item in categoryOptions"            
            :key="item.id"            
            :label="item.name"            
            :value="item.id"          
          />        
        </el-select>      
      </el-form-item>
      
      <el-form-item label="创建时间" prop="createTime">        
        <el-date-picker          
          v-model="queryParams.createTime"          
          type="daterange"          
          start-placeholder="开始日期"          
          end-placeholder="结束日期"          
          value-format="YYYY-MM-DD"          
          style="width: 260px"        
        />      
      </el-form-item>      
      
      <el-form-item label="操作时间" prop="operateTime">        
        <el-date-picker          
          v-model="queryParams.operateTime"          
          type="daterange"          
          start-placeholder="开始日期"          
          end-placeholder="结束日期"          
          value-format="YYYY-MM-DD"          
          style="width: 260px"        
        />      
      </el-form-item>
            
      <el-form-item>        
        <el-button          
          type="primary"          
          icon="Search"          
          @click="handleQuery"        
          >查询</el-button>        
        <el-button          
          icon="Refresh"          
          @click="resetQuery"        
          >重置</el-button>    
      </el-form-item>    
    </el-form>
    
    <!-- 列表信息 -->    
    <el-table      
      v-loading="loading"      
      :data="list"      
      border      
      style="margin-top: 10px"    
    >      
      <el-table-column        
        type="index"        
        label="编号"        
        width="80"        
        align="center"      
      />      
      <el-table-column        
        label="枪弹名称"        
        prop="categoryName"        
        min-width="160"      
      />      
      <el-table-column        
        label="数量"        
        prop="quantity"        
        width="100"        
        align="center"      
      />      
      <el-table-column        
        label="枪弹类型"        
        prop="gunType"        
        width="120"      
      />      
      <el-table-column        
        label="修改时间"        
        prop="updateTime"        
        width="170"      
      >        
        <template #default="scope">          
          <span>{{ parseTime(scope.row.updateTime) }}</span>        
        </template>      
      </el-table-column>      
      <el-table-column        
        label="创建时间"        
        prop="createTime"        
        width="170"      
      >        
        <template #default="scope">          
          <span>{{ parseTime(scope.row.createTime) }}</span>        
        </template>      
      </el-table-column>      
      <el-table-column        
        label="操作员"        
        prop="operatorName"        
        width="120"      
      />      
      <el-table-column        
        label="创建人"       
        prop="creatorName"        
        width="120"      
      />      
      <el-table-column        
        label="备注"        
        prop="remark"        
        min-width="160"        
        show-overflow-tooltip      
      />    
    </el-table>    
    
    <pagination      
      v-show="total > 0"      
      :total="total"      
      v-model:page="queryParams.pageNum"      
      v-model:limit="queryParams.pageSize"      
      @pagination="getList"    
    />  
  </div>
</template>

<script setup name="Record">
import { ref, reactive, onMounted, getCurrentInstance } from "vue"
import { parseTime } from "@/utils/ruoyi"
import { listRecordSummary } from "@/api/service/record"

const { proxy } = getCurrentInstance()

const loading = ref(false);
const list = ref([]);
const total = ref(0);

// 查询参数
const queryParams = reactive({  
  pageNum: 1,  
  pageSize: 10,  
  id: undefined,             
  categoryId: undefined,   
  createTime: [],          
  operateTime: []          
})
  
  // 枪弹名称下拉框数据（这里先留空，可以用自己已有的接口去加载）
  const categoryOptions = ref([])
  
  /** 查询汇总列表 */
  function getList() {  
    loading.value = true  
    // 若依统一的时间范围处理：生成 params.beginCreateTime / endCreateTime 等  
    const params = proxy.addDateRange(    
      proxy.addDateRange(queryParams, "createTime"),    
      "operateTime"  
    )
    listRecordSummary(params).then(res => {    
      list.value = res.rows || []    
      total.value = res.total || 0    
      loading.value = false
    }).catch(() => {    
      loading.value = false  
    })
  }
  
  /** 查询按钮 */
  function handleQuery() {  
    queryParams.pageNum = 1
    getList()
  }
  
  /** 重置按钮 */
  function resetQuery() {  
    proxy.resetForm("queryRef")
    // 手动清空时间范围  
    queryParams.createTime = []
    queryParams.operateTime = [] 
    handleQuery()
  }
  
  /** TODO：加载枪弹名称下拉（如果已有类别接口，可以在这里调）
  function loadCategoryOptions() {
    listGunCategorySimple().then(res => {
      categoryOptions.value = res.data || []  
    })
  }
  */
 
  onMounted(() => {
    // loadCategoryOptions()  
    getList()
  })

</script>